import { Button, Card, Form, Input, message, Modal } from 'antd'
import React,{useEffect,useState} from 'react'

import Table, { ColumnsType } from 'antd/lib/table';
import {SearchOutlined,EditOutlined,DeleteOutlined} from '@ant-design/icons';
import { reqBatchRemoveHospitalList, reqGetHospitalSetList, reqRemoveHospital } from '@/api/hospital/hospitalSet';
import type { HospitalSetList } from '@/api/hospital/model/hospitalSetTypes';
import { useForm } from 'antd/lib/form/Form';
import { useNavigate } from 'react-router-dom';

const {confirm}=Modal

export default function HospitalSet() {

  //设置状态每页展示数量
  let [pageSize,setPageSize]= useState(8);
  //设置总数量
  let [total,setTotal]= useState(0);
  //设置当前页码
  let [current,setCurrent]= useState(1);

  //设置 加载中 状态
  let [loading,setLoading] = useState(false);

  // 医院设置列表状态              //state 存储数据的类型约束
  let [hospital,setHospital] = useState<HospitalSetList>([]);

  //获取表格的keys
  let [keys,setKeys] = useState< React.Key[]>([]);

  //  编程式导航 路由
  let navigate = useNavigate();

  // antd 获取表单
  let [form] = useForm()

  

  //获取医院设置列表的 方法
  let getHospitallist = async ()=>{
    // 获取表单数据
    let {hosname,hoscode} = form.getFieldsValue()
    
    //设置加载中
    setLoading(true);

    //请求医院设置列表的api
      let result = await reqGetHospitalSetList({page:current,limit:pageSize,hosname:hosname,hoscode:hoscode});
      // console.log(result);

      //设置加载中
      setLoading(false)
      //设置医院的数据
      setHospital(result.records);
      //设置总数
      setTotal(result.total);

  }


  
  
  //模拟生命周期
   useEffect(()=>{
    //调用 医院设置列表的 方法
    getHospitallist();
  },[current,pageSize])

  //  获取表单数据的方法
  let finish = ()=>{
    
    // 请求 医院设置列表方法
    getHospitallist()
  }

  // 清空表单 方法
  let reset = ()=>{
    // 请求 医院设置列表方法
    getHospitallist()
  }


  //删除单个医院信息
  let del = (id:number,hosname:string)=>{
    return()=>{
      confirm({
        title:`确定删除   ${hosname}   吗？`,
        okType:"danger",
        async onOk(){
          //请求api 删除单个医院
          await reqRemoveHospital(id);
          //成功提示
          message.success("删除成功！");
          // 重新请求数据
          getHospitallist();
        }
      })
    }
  }


  //切换 表格多选
  let change = (selectedRowKeys:React.Key[])=>{
    //设置keys 状态
    setKeys(selectedRowKeys);
  }

  //批量删除医院
  let delAll = async ()=>{
    //请求 批量删除 api
    await reqBatchRemoveHospitalList(keys);
    // 成功提示
    message.success('批量成功删除！')

    //重新请求数据
    getHospitallist();

    //设置keys 状态
    setKeys([]);
     
  }













  //设置表头信息
  const columns:ColumnsType<any> = [
    {
        title:"序号",   //  表格列的标题
        dataIndex:"id",  // 表格列的对应data的数据
        render:(text:any, record:any, index:any)=>{    //自定义渲染表格
          //text  当前对象 所对应的 dataIndex 值
          // record  当前一行数据
          // index  数据源中的下标
          return  index+1;
        },
        align:"center",
        width:80,
    },
    {
      title:"医院名称",
      dataIndex:"hosname",
      align:"center"
      
    },
    {
      title:"医院编号",
      dataIndex:"hoscode",
      align:"center"
      
    },
    {
      title:"api基础路径",
      dataIndex:"apiUrl",
      align:"center"
      
    },
    {
      title:"签名",
      dataIndex:"signKey",
      align:"center"
      
    },
    {
      title:"联系人姓名",
      dataIndex:"contactsName",
      align:"center"
      
    },
    {
      title:"联系人手机",
      dataIndex:"contactsPhone",
      align:"center"
      
    },
    {
      title:"操作",
      render:(row)=>{
        //如果 有 dataIndex ， 此时render 第一个参数就是dataIndex的值,第二个参数是这一行数据对象,第三个是当前数据所在的数组里的下标
        //如果 没有 dataIndex ， 此时 render 第一个参数就是这一行数据对象
        return <div>
          <Button type="primary" onClick={()=>{
           navigate(`/syt/hospital/hospitalSet/edit/${row.id}`)                  
          }} icon={<EditOutlined />}></Button>

          <Button onClick={del(row.id,row.hosname)} className='ml' danger type="primary" icon={<DeleteOutlined />}></Button>
        </div>
      },
      fixed:"right"
      
      
    }
    
  ];







  return (
  <> 
    <Card>

      {/* 搜索表单 */}
      <Form
      layout='inline'
      form={form}
      onFinish={finish}
      onReset={reset}
      >
         <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input placeholder='医院编号' />
        </Form.Item>


        <Form.Item >
          <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
            查询
          </Button>
        </Form.Item>
        <Form.Item >
          <Button type="default" htmlType="reset">
            清空
          </Button>
        </Form.Item>
      </Form>
    

      {/* 添加和批量删除 */}
      <div className='mt'>
        <Button type="primary" onClick={()=>{
            navigate("/syt/hospital/hospitalSet/add");
          }}>添加</Button>
        <Button onClick={delAll} type="primary" 
        danger
        className='ml' disabled={keys.length === 0 ? true : false}>批量删除</Button>
      </div>
    

      {/* 表格 */}

      <Table
      rowSelection={{
        onChange:change
      }}
      rowKey="id"
      loading={loading}
      dataSource={hospital}
      columns={columns}
      scroll={{x:1200}}
      pagination={{
        total,   //总数
        pageSize,  // 每页展示数量
        current,  //当前页码
        showSizeChanger:true,   //设置每页展示数量
        pageSizeOptions:[5,8,10,15],  //设置每页展示数量
        showQuickJumper:true,  //是否可以快速跳转至某页
        showTotal:(total: number)=>{
            return <p>当前总数:{total}条</p>
        },
        onChange:(page: number, pageSize: number)=>{
          //设置当前页码
          setCurrent(page);
          //设置每页展示数量
          setPageSize(pageSize)
        }
      }}
      ></Table>
    </Card>
  
  </>
  )
}
